<template>
  <div class="header">

    <div class="nav">

      <div></div>

      <div class="nav-mid">猫眼电影</div>

      <div class="nav-right">

        <img src="../assets/img/my-01.png" alt="" @click="changeSta" />

      </div>

    </div>

    <div class="box" v-show="isShow">

      <p>首页</p>

      <p>榜单</p>

      <p>热点</p>

      <p>商城</p>

    </div>

  </div>
</template>




<script>
export default {
  name: "MyHeader1",
  data() {
    return {
      isShow: false
    }

  },
  methods: {
    changeSta() {
      this.isShow = !this.isShow
    }
  }
};
</script>

<style lang='less' scoped>





.header .box {
  position: fixed;
  top: .96rem;
  right: .24rem;
  width: 2.9333rem;
  height: 4.9333rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 999;
  box-shadow: 0 0.06rem 0.18rem 0 rgba(0, 0, 0, .1);
}

.box p {
  width: 100%;
  height: calc(4.9333rem / 4);
  text-align: center;
  line-height: calc(4.9333rem / 4);
  font-size: .4rem;
  color: #333;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.header {
  width: 100%;
  height: 50px;
  background: #e54847;
  text-align: center;
  color: #fff;
}

.nav {
  width: 100%;
  height: 1.333333rem;
  background: #e54847;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav div:nth-child(1) {
  width: 2.666667rem;
  height: 1.333333rem;
}

.nav-right {
  width: 2.666667rem;
  height: 1.333333rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-mid {
  width: 4.266667rem;
  color: #fff;
  font-size: 0.48rem;
  text-align: center;
}

.nav-right img {
  width: 0.453333rem;
  height: 0.426667rem;
  display: inline-block;
  margin-right: 0.213333rem;
}

.nav-right {
  display: flex;
  justify-content: end;
  margin-right: 0.266667rem;
}
</style>


